{% extends "base.html" %} {% block title %}个人信息 - 运动健康管理系统{%
endblock %} {% block content %}
<div class="container my-5">
  <div class="row">
    <div class="col-md-4 mb-4">
      <div class="card">
        <div class="card-body text-center">
          <h4 id="profileUsername">{{ current_user.username }}</h4>
          <p class="text-muted">{{ user_data.userType }}</p>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="card-header bg-white">
          <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">个人信息</h5>
            <button id="editInfoBtn" class="btn btn-primary btn-sm">
              <i class="bi bi-pencil"></i> 编辑信息
            </button>
          </div>
        </div>
        <div class="card-body">
          <!-- 查看信息部分 -->
          <div id="viewInfoSection">
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">用户名</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewUsername">
                  {{ user_data.username }}
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">电子邮箱</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewEmail">
                  {{ user_data.email }}
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">手机号码</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewPhone">
                  {{ user_data.phone_number }}
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">性别</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewGender">
                  {{ user_data.gender }}
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">年龄</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewAge">{{ user_data.age }}</p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">身高</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewHeight">
                  {{ user_data.height }}cm
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">体重</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewWeight">
                  {{ user_data.weight }}kg
                </p>
              </div>
            </div>
            <hr />
            <div class="row mb-3">
              <div class="col-sm-3">
                <p class="mb-0">健康目标</p>
              </div>
              <div class="col-sm-9">
                <p class="text-muted mb-0" id="viewGoal">
                  {{ user_data.goal }}
                </p>
              </div>
            </div>
          </div>

          <!-- 编辑信息表单 -->
          <div id="editInfoForm" style="display: none">
            <form
              id="editInfoForm"
              method="POST"
              action="{{ url_for('update_user_info') }}">
              {{ form.hidden_tag() }}
              <!-- 表单字段 -->
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editUsername" class="form-label">用户名</label>
                </div>
                <div class="col-sm-9">
                  {{ form.username(class="form-control", id="editUsername",
                  readonly=true) }}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editEmail" class="form-label">电子邮箱</label>
                </div>
                <div class="col-sm-9">
                  {{ form.email(class="form-control", id="editEmail") }}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editPhone" class="form-label">手机号码</label>
                </div>
                <div class="col-sm-9">
                  {{ form.phone(class="form-control", id="editPhone") }}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label class="form-label">性别</label>
                </div>
                <div class="col-sm-9">
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="gender"
                    id="editGenderMale" value="男" {% if user_data.gender ==
                    '男' %}checked{% endif %}>
                    <label class="form-check-label" for="editGenderMale"
                      >男</label
                    >
                  </div>
                  <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="gender"
                    id="editGenderFemale" value="女" {% if user_data.gender ==
                    '女' %}checked{% endif %}>
                    <label class="form-check-label" for="editGenderFemale"
                      >女</label
                    >
                  </div>
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editAge" class="form-label">年龄</label>
                </div>
                <div class="col-sm-9">
                  {{ form.age(class="form-control", id="editAge", type="number")
                  }}
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editHeight" class="form-label">身高 (cm)</label>
                </div>
                <div class="col-sm-9">
                  <input
                    type="number"
                    step="0.1"
                    class="form-control"
                    id="editHeight"
                    name="height"
                    value="{{ user_data.height }}" />
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editWeight" class="form-label">体重 (kg)</label>
                </div>
                <div class="col-sm-9">
                  <input
                    type="number"
                    step="0.1"
                    class="form-control"
                    id="editWeight"
                    name="weight"
                    value="{{ user_data.weight }}" />
                </div>
              </div>
              <div class="row mb-3">
                <div class="col-sm-3">
                  <label for="editGoal" class="form-label">健康目标</label>
                </div>
                <div class="col-sm-9">
                  {{ form.goal(class="form-select", id="editGoal") }}
                </div>
              </div>
              <div class="d-flex justify-content-end">
                <button
                  type="button"
                  class="btn btn-secondary me-2"
                  id="cancelEditBtn">
                  取消
                </button>
                <button type="submit" class="btn btn-primary">保存修改</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block extra_js %}
<script src="{{ url_for('static', filename='scripts/user-info.js') }}"></script>
{% endblock %}
